<!--
 * @Description: MVVM原理学习
 * 数据劫持+订阅发布
 * observer 是 Vue 的一个核心模块，能够实现视图与数据的响应式更新，底层全凭 observer 的支持。
 * observer 模块共分为这几个部分：
 * Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下
 * Watcher: 数据的订阅者，数据的变化会通知到 Watcher，然后由 Watcher 进行相应的操作（例如更新视图）
 * Dep: Observer 与 Watcher 的纽带，当数据变化时，会被 Observer 观察到，然后由 Dep 通知到 Watcher
 * @Version: 1.0.0
 * @Author: gyh
 * @Date: 2021-08-20 11:16:54
 * @LastEditors: gyh
 * @LastEditTime: 2021-08-20 13:13:40
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue</title>
  </head>
  <body>
    <!--<div id="app">-->
    <!--{{a.b}}-->
    <!--<p>a的值是{{a.b}}</p>-->
    <!--<div v-on:click="clickMe">b的值是{{c}}</div>-->
    <!--{{c}}-->
    <!--<br>-->

    <!--{{sum}}-->
    <!--</div>-->
    <div id="app">
      <input type="text" v-model="song" />
      <h1>{{song}}-{{singer}}</h1>
      <p>《{{album.name}}》是{{singer}}2005年11月发行的专辑</p>
    </div>
    <a href="https://juejin.cn/post/6844903586103558158#heading-10" target="_blank">
      不好意思！耽误你的十分钟，让MVVM原理还给你
    </a>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  let vue = new Vue({
    el: '#app',
    data: {
      // Object.defineProperty(obj, 'song', '发如雪');
      song: '发如雪',
      album: {
        name: '十一月的萧邦',
        theme: '夜曲',
      },
      singer: '周杰伦',
    },
    //        data: {
    //            a: {
    //                b: {
    //                    hi: {
    //                        wow: '你好'
    //                    }
    //                }
    //            },
    //            b: 8,
    //            c: 2
    //        },
    methods: {
      clickMe() {
        alert(1)
      },
    },
    // computed可以缓存 只是把数据挂在了vm上
    computed: {
      sum() {
        return this.b + this.c
      },
      noop() {},
    },
    mounted() {
      setTimeout(() => {
        //                console.log('爱不爱我');
      }, 1000)
    },
  })
</script>
